<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器的权重</title>
		<style>
			#d1{  /* 权值100*/
				background-color:#ff0000;
			}
			div#d1{/* 权值101 优先选中 推荐 */
			   background-color:#000000;
			}
			.d{/* 权值10 */
			background-color:#ffaa00;
			}
			.d:hover{ /* 权值10+10*/
				background-color:#aaffff;
			}
			div{/* 权值1 */
				background-color:#ffff7f;
			}
			*{/* 权值0 */
				background-color:#0000ff;
			}
		</style>
	</head>
	<body>
		<!--各种选择器同时对一个元素进行样式添加 {权重} 
		权重：选择器的优先级{权值越大，优先执行}
		内联样式                  权值1000     不建议使用
		ID选择器                 权值 100
		类选择器，伪类选择器      权值 10
		元素选择器               权值 1
		通用选择器               权值 0
		权值可以进行计算：后 子 兄弟 算和
		不建议使用：破坏优先级，语法：属性值 ！important；
		-->
		<div id="d1" class="d" style="background-color: red;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, natus. Ex blanditiis sed eveniet error dolor laboriosam at cum necessitatibus! Libero reiciendis facere illo voluptatum, rem fuga? Consequatur, quasi nam.</div>
	</body>
</html>